<template>
	<div class="good-box" @click="goToDetail">
		<div class="left">
			<image :src="goodImage" mode=""></image>
		</div>
		<div class="right">
			<view class="u-line-2 good-name">
				{{good.goods_name}}
			</view>
			<div class="fl-box">约返 {{goodCommission}} 元</div>
			<div class="price-box">
				<div class="price">
					￥<text>{{(good.m_price?good.m_price:good.price).toFixed(2)}}</text>
				</div>
					<div class="del">
					原价 ：￥{{good.price}}
				</div>
			</div>
			<div class="store">
				{{source}} | {{good.shop}} {{good.sale}}人付款
			</div>
		</div>
	</div>
</template>

<script>
	const types = {
		1: 'jd',
		4: 'pdd'
	}
	export default {
		props: {
			good: {
				type: Object
			}
		},
		computed: {
			goodImage() {
				return this.good.goods_images
			},
			goodCommission() {
				return this.good.set_commision_rate
			},
			goodPrice() {
				return this.good.price
			},
			source() {
				if (this.good.source == 1) {
					return '京东'
				}
				if (this.good.source == 4) {
					return '拼多多'
				}
			}
		},
		methods: {
			goToDetail() {
			
				this.$navTo('pageC/goods/goods', {
					id: this.good.id,
					type: types[this.good.source]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.good-box {
		padding: 36rpx 24rpx;
		display: flex;
		align-content: center;
		margin-bottom: 14rpx;

		.left {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			border-radius: 16rpx;
			overflow: hidden;
			margin-right: 24rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			flex: 1;

			.good-name {
				margin-bottom: 12rpx;
			}

			.fl-box {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 20rpx;
				color: #FF8C19;
				width: 132rpx;
				height: 28rpx;
				border-radius: 4rpx;
				border: 1rpx solid #FF8C19;
				margin-bottom: 26rpx;
			}

			.price-box {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				.price {
					font-size: 22rpx;
					margin-right: 12rpx;

					>text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.del {
					text-decoration: line-through;
					font-weight: 400;
					font-size: 24rpx;
					color: #D9D4D0;
				}
			}

			.store {
				font-weight: 400;
				font-size: 20rpx;
				color: #999390;
			}

		}
	}
</style>